<script type="text/javascript">
<?php $timestamp = time();?>
var self     = "[picid]";  // 元素id
var name     = "[name]";   // input框name值
var upthumb  = $("#"+self).attr('data-ul');      // 显示图片位置class
var multi    = $("#"+self).attr('data-multi');   // 1是一张图，非1是多张图
var isResize = $("#"+self).attr('data-resize');  // 1压缩图片
var picWidth = $("#"+self).attr('data-width');   // 压缩图片后的宽度，等比例缩放
var qualitys = $("#"+self).attr('data-quality'); // 压缩图片质量，只能适用于jpg格式的，默认设置80
var thumb_w  = $("#"+self).attr('data-thumb-w'); // 生成缩略图后的宽度设置

if(isResize == '' || isResize == 'undefined'){
    isResize = 0;
}
if(picWidth == '' || picWidth == 'undefined' || !picWidth){
    picWidth = 0;
}
if(qualitys == '' || qualitys == 'undefined' || !qualitys){
    qualitys = 90;
}
if(thumb_w == '' || thumb_w == 'undefined' || !thumb_w){
    thumb_w = 0;
}

var uploader = new plupload.Uploader({
    runtimes : 'html5,flash,silverlight,html4',
    browse_button : self, // 上传按钮id
    url : "{:Url('Uploads/thumb')}",
    flash_swf_url : '__JS__/plupload/Moxie.swf',
    silverlight_xap_url : '__JS__/plupload/Moxie.xap',
    filters : {
        max_file_size : '2mb',
        mime_types: [{title:"图片文件", extensions:"image/png,image/jpeg,image/gif"}],
    },
});
if (isResize > 0 && picWidth > 0) {
    uploader.setOption('resize', {width: picWidth,quality: qualitys});
} else if (isResize > 0 && picWidth == 0) {
    uploader.setOption('resize', {quality: qualitys});
}
if (thumb_w > 0) {
    uploader.setOption('multipart_params', {'timestamp': '<?php echo $timestamp;?>','token':'<?php echo md5('hellodive_self' . $timestamp);?>','thumb_w':thumb_w, 'quality':qualitys});
} else {
    uploader.setOption('multipart_params', {'timestamp': '<?php echo $timestamp;?>','token':'<?php echo md5('hellodive_self' . $timestamp);?>', 'quality':qualitys});
}
uploader.init();

uploader.bind('FilesAdded', function(up, files) {
    plupload.each(files, function(file) {
        var fileName = file.name;
        if (fileName.length > 25) {
            fileName = fileName.substr(0,25) + ' ...';
        }
        html  = '<div id="'+file.id+'" class="queue-item"><div class="cancel">';
        html += '<a href="javascript:;" class="upload-delete" data-val="'+file.id+'">X</a></div>';
        html += '<span class="fileName">'+fileName+' ('+plupload.formatSize(file.size)+')</span><span class="data"></span>';
        html += '<div class="progress"><div class="progress-bar"><!--Progress Bar--></div></div></div>';
        $("#"+self+'_queue').append(html);
    });
    uploader.start();
});
uploader.bind('UploadProgress', function(up, file) {
    $('#' + file.id).find('.data').html(' - ' + file.percent + '%');
    $('#' + file.id).find('.progress-bar').css('width', file.percent + '%');
    if (file.percent == 100) {
        setTimeout(function(){
            $('#' + file.id).remove();
        }, 3*1000);
    }
});
uploader.bind('FileUploaded', function(up, file, responseObject) {
    var res = JSON.parse(responseObject.response);
    if(res.status == 0){
        return layer.alert(res.msg);
    } else {
        data = res.data;
        var html = '<li class="li_'+data.id+'">';
        if (multi == 0) {
            html += '<input type="hidden" name="'+name+'" value="'+data.url+'" />';
        } else {
            html += '<input type="hidden" name="'+name+'[]" value="'+data.url+'" />';
        }
        html += '<div class="upload_img_div"><a href="'+data.url+'" class="cboxElement">';
        html += '<img src="'+data.url+'" alt="'+data.name+'" class="img-responsive" /></a></div>';
        html += '<div class="tools tools-top">';
        html += '<a href="javascript:;" onclick="remove_img(\'li_'+data.id+'\');"><i class="fa fa-remove red"></i></a>';
        html += '</div></li>';
        if (multi == 0) {
            $("."+upthumb).html(html);
        } else {
            $("."+upthumb).append(html);
        }
    }
});
uploader.bind('Error', function(up, err) {
    return layer.alert(err.message);
});
</script>